<template>
    <div class="dashboard-container" id="food-app">
        <div class="container">
            <div class="tableBar">
                <el-input v-model="input" placeholder="请输入菜品名称" style="width: 250px" clearable
                    @keyup.enter.native="handleQuery">
                    <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
                </el-input>
                <!-- ================== -->
                <el-select @change="$forceUpdate(), changeRole(categoiryList.id)" placeholder="请选择菜品分类"
                    v-model="categoiryList.id">
                    <el-option :key="index" :label="item.name" :value="item.id"
                        v-for="(item, index) in categoiryList" />
                </el-select>
                <div class="tableLab">
                    <span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span>
                    <span class="span-btn blueBug non" @click="statusHandle('1')">批量启售</span>
                    <span style="border:none;" class="span-btn delBut non" @click="statusHandle('0')">批量停售</span>
                    <el-button type="primary" @click="addFoodtype('add')">
                        + 新建菜品
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="25"></el-table-column>
                <el-table-column prop="name" label="菜品名称"></el-table-column>
                <el-table-column prop="image" label="图片" align="center">
                    <template slot-scope="{ row }">
                        <!-- 开启懒加载:a -->
                        <!-- <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                            :src="getImage(row.image)"
                            :preview-src-list="[`http://192.168.174.100:8888/common/download?name=${row.image}`]"> -->
                        <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                            :src="getImage(row.image)" :preview-src-list="[`https://serms.xyz/${row.image}`]">
                            <div slot="error" class="image-slot">
                                <img src="./images/noImg.png" style="width: auto; height: 40px; border:none;">
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="菜品分类"></el-table-column>
                <el-table-column label="售价">
                    <template slot-scope="scope">
                        <span style="margin-right: 10px;">￥{{ scope.row.price / 100 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="售卖状态">
                    <template slot-scope="scope">
                        <span style="margin-right: 10px;">{{ scope.row.status == '0' ? '停售' : '启售' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作时间">
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="blueBug" @click="addFoodtype(scope.row.id)">
                            修改
                        </el-button>
                        <el-button type="text" size="small" class="blueBug" @click="statusHandle(scope.row)">
                            {{ scope.row.status == '0' ? '启售' : '停售' }}
                        </el-button>
                        <el-button type="text" size="small" class="delBut non"
                            @click="deleteHandle('单删', scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
                :current-page.sync="page" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<script>
import { deleteDish, dishStatusByStatus, getDishPage, categoiryList } from '@/api/food'

export default {
    name: 'food',

    data() {
        return {
            input: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            dishState: '',
            checkList: [],
            imgslist: [],
            categoiryList: [
            ],
            categoiryid: '',
        }
    },
    computed: {},
    created() {
        this.init(),
            this.categoiryInit()
    },
    mounted() {
    },
    methods: {
        changeRole(id) {
            console.log("=====我是回调changeRole===");
            console.log(id);
            this.categoiryid = id;
            this.init()
        },
        async init() {
            const params = {
                page: this.page,
                pageSize: this.pageSize,
                name: this.input ? this.input : undefined,
                categoiryid: this.categoiryid ? this.categoiryid : this.categoiryid = 0
            }
            await getDishPage(params).then(res => {
                if (String(res.code) === '1') {
                    this.tableData = res.data.records || []
                    console.log("=====我是回调getDishPage===");
                    console.log(this.tableData);
                    this.counts = res.data.total
                }
            }).catch(err => {
                this.$message.error('请求出错了：' + err)
            })
        },
        async categoiryInit() {
            await categoiryList().then(res => {
                console.log("====查询菜品分类名称====")
                if (String(res.code) === '1') {
                    this.categoiryList = [],
                        console.log("====ssss====")
                    console.log(res.data);
                    this.categoiryList = res.data || []
                    this.categoiryList.unshift({
                        id: 0,
                        name: '全部'
                    })
                }
            }).catch(err => {
                this.$message.error('请求出错了：' + err)
            })
        },
        getImage(image) {
            // dishDownload(image).then(res => {
            //     console.log("=====dishDownload====res");
            //     const le = btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
            //     console.log(le);
            //     return `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
            // })
            // return `http://192.168.174.100:8888/common/download?name=${image}`
            // return `http://47.99.194.162:8888/common/download?name=${image}`
            return 'https://serms.xyz/' + image
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
        // 添加
        addFoodtype(st) {
            if (st === 'add') {
                const menu = {
                    id: '4',
                    url: 'home/foodadd',
                    name: '添加菜品',
                    goBackFlag: true
                }
                this.$store.dispatch('menuHandle', menu)
            } else {
                const menu = {
                    id: '4',
                    url: 'home/foodadd?id=' + st,
                    name: '修改菜品',
                    goBackFlag: true
                }
                this.$store.dispatch('menuHandle', menu)
            }
        },

        // 删除
        deleteHandle(type, id) {
            if (type === '批量' && id === null) {
                if (this.checkList.length === 0) {
                    return this.$message.error('请选择删除对象')
                }
            }
            this.$confirm('确认删除该菜品, 是否继续?', '确定删除', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
            }).then(() => {
                deleteDish(type === '批量' ? this.checkList.join(',') : id).then(res => {
                    if (res.code === 1) {
                        this.$message.success('删除成功！')
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
        },

        //状态更改
        statusHandle(row) {
            let params = {}
            if (typeof row === 'string') {
                if (this.checkList.length === 0) {
                    this.$message.error('批量操作，请先勾选操作菜品！')
                    return false
                }
                params.id = this.checkList.join(',')
                params.status = row
            } else {
                params.id = row.id
                params.status = row.status ? '0' : '1'
            }
            this.dishState = params
            this.$confirm('确认更改该菜品状态?', '提示', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
            }).then(() => {
                // 起售停售---批量起售停售接口
                dishStatusByStatus(this.dishState).then(res => {
                    if (res.code === 1) {
                        this.$message.success('菜品状态已经更改成功！')
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
        },

        // 全部操作
        handleSelectionChange(val) {
            let checkArr = []
            val.forEach((n) => {
                checkArr.push(n.id)
            })
            this.checkList = checkArr
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.page = val
            this.init()
        }
    }
};
</script>

<style lang="css" scoped>
/* 引入外部样式 */
@import '@/assets/css/common.css';
@import '@/assets/css/page.css';
</style>